<script>
import UploadImage from '@/components/UploadImage.vue'

export default {
  name: 'ProjectEdit',
  components: { UploadImage },
  data () {
    return {
      baseImageSrc: process.env.VUE_APP_BASE_PATH,
      show: false,
      dataForm: {
        id: '',
        src: '',
        name: '',
        profile: '',
        imgs: []
      },
      rules: {
        src: [{ required: true, message: '请上传图片' }],
        imgs: [{ required: true, message: '请上传图片' }]
      },
      imageInfo: {
        src: { list: [] },
        imgs: { list: [], limit: 10 }
      }
    }
  },
  methods: {
    getById (id) {
      this.show = true
      this.dataForm = { ...this.$options.data().dataForm }
      this.imageInfo = { ...this.$options.data().imageInfo }
      if (id) {
        this.$axios.get('project2',
          {
            params: {
              param: 'info',
              id
            }
          }
        ).then(data => {
          /* 数据回显 */
          this.dataForm = {
            ...data,
            imgs: data.projectImgList.map(item => item.src).toString()
          }
          /* 图片回显 */
          this.imageInfo.src.list.push({ name: data.src, url: this.baseImageSrc + data.src })
          this.imageInfo.imgs.list = data.projectImgList.map(item => {
            return {
              name: item.src,
              url: this.baseImageSrc + item.src
            }
          })
        }).catch(e => e)
      }
    },
    submit () {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.dataForm.imgs = this.imageInfo.imgs.list.map(item => item.name)
          this.$axios.post('project2?param=update', this.dataForm).then(() => {
            this.$message.success('更新成功！')
            this.show = false
            this.$emit('close')
          }).catch(e => e)
        }
      })
    },
    successImage ({ imageKey, filename }) {
      this.imageInfo[imageKey].list.push({ name: filename, url: this.baseImageSrc + filename })
      this.dataForm[imageKey] = this.imageInfo[imageKey].list.map(item => item.name).toString()
    },
    deleteImage ({ imageKey, index }) {
      this.imageInfo[imageKey].list.splice(index, 1)
      this.dataForm[imageKey] = this.imageInfo[imageKey].list.map(item => item.name).toString()
    }
  }
}
</script>

<template>
  <el-dialog title="课程编辑" :visible.sync="show" v-if="show">
    <el-form :model="dataForm" :rules="rules" label-width="80px" ref="dataForm">
      <el-form-item label="课程名称">
        <el-input v-model="dataForm.name" placeholder="请输入课程名称" clearable/>
      </el-form-item>
      <el-form-item label="课程简介">
        <el-input v-model="dataForm.profile" type="textarea" :rows="3" maxlength="150" show-word-limit placeholder="请输入跳转地址"/>
      </el-form-item>
      <el-form-item label="课程大纲" prop="src">
        <el-input v-model="dataForm.src" style="display: none"/>
        <upload-image :image-list="imageInfo.src.list" :data="{type:'project'}" image-key="src" @delete="deleteImage" @success="successImage"/>
      </el-form-item>
      <el-form-item label="课程详情" prop="imgs">
        <el-input v-model="dataForm.imgs" style="display: none"/>
        <upload-image :image-list="imageInfo.imgs.list" :limit="imageInfo.imgs.limit" :data="{type:'project'}" image-key="imgs" @delete="deleteImage" @success="successImage"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
